
 <!DOCTYPE HTML>
<html >
<head>
  <meta charset="UTF-8">
  
    <title>谭俊熙_mini桌面应用后端 | B3434lockchain</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    
    <meta name="author" content="b3434lockchain">
    

    
    <meta name="description" content="数据库设计  将登录认证的信息和个人信息分开不同的表存储，方便以后扩展第三方登录等等各种登陆方式。 将认证信息和个人信息分开，可是使得信息更加安全，返回前端的信息不会包含密码之类的信息。 其中id是通过一个叫idworker的生成器成成的唯一标识的16位字符串的id，方便以后的分库分表操作 密码通过md5加密保存  后端整体框架（springboot+netty+mybatis）  通过mybat">
<meta name="keywords" content="周报,谭俊熙">
<meta property="og:type" content="article">
<meta property="og:title" content="谭俊熙_mini桌面应用后端">
<meta property="og:url" content="http://b3434lockchain.gitee.io/2019/04/15/tanjunxi/tanjunxi6/index.html">
<meta property="og:site_name" content="B3434lockchain">
<meta property="og:description" content="数据库设计  将登录认证的信息和个人信息分开不同的表存储，方便以后扩展第三方登录等等各种登陆方式。 将认证信息和个人信息分开，可是使得信息更加安全，返回前端的信息不会包含密码之类的信息。 其中id是通过一个叫idworker的生成器成成的唯一标识的16位字符串的id，方便以后的分库分表操作 密码通过md5加密保存  后端整体框架（springboot+netty+mybatis）  通过mybat">
<meta property="og:locale" content="default">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/14229679-8a942ba59e90da94.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/14229679-6a42b6317073e9d7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:updated_time" content="2019-04-15T11:00:41.711Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="谭俊熙_mini桌面应用后端">
<meta name="twitter:description" content="数据库设计  将登录认证的信息和个人信息分开不同的表存储，方便以后扩展第三方登录等等各种登陆方式。 将认证信息和个人信息分开，可是使得信息更加安全，返回前端的信息不会包含密码之类的信息。 其中id是通过一个叫idworker的生成器成成的唯一标识的16位字符串的id，方便以后的分库分表操作 密码通过md5加密保存  后端整体框架（springboot+netty+mybatis）  通过mybat">
<meta name="twitter:image" content="https://upload-images.jianshu.io/upload_images/14229679-8a942ba59e90da94.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">

    
    <link rel="alternative" href="/atom.xml" title="B3434lockchain" type="application/atom+xml">
    
    
    <link rel="icon" href="/img/favicon.ico">
    
    
    <link rel="apple-touch-icon" href="/img/jacman.jpg">
    <link rel="apple-touch-icon-precomposed" href="/img/jacman.jpg">
    
    <link rel="stylesheet" href="/css/style.css">
</head>

  <body>
    <header>
      
<div>
		
			<div id="imglogo">
				<a href="/"><img src="/img/logo.png" alt="B3434lockchain" title="B3434lockchain"/></a>
			</div>
			
			<div id="textlogo">
				<h1 class="site-name"><a href="/" title="B3434lockchain">B3434lockchain</a></h1>
				<h2 class="blog-motto"></h2>
			</div>
			<div class="navbar"><a class="navbutton navmobile" href="#" title="Menu">
			</a></div>
			<nav class="animated">
				<ul>
					<ul>
					 
						<li><a href="/">Home</a></li>
					
						<li><a href="/archives">Archives</a></li>
					
						<li><a href="/about">About</a></li>
					
					<li>
 					
						<form class="search" action="https://www.baidu.com" target="_blank">
							<label>Search</label>
						<input name="s" type="hidden" value=  ><input type="text" name="q" size="30" placeholder="Search"><br>
						</form>
					
					</li>
				</ul>
			</nav>			
</div>
    </header>
    <div id="container">
      <div id="main" class="post" itemscope itemprop="blogPost">
  
	<article itemprop="articleBody"> 
		<header class="article-info clearfix">
  <h1 itemprop="name">
    
      <a href="/2019/04/15/tanjunxi/tanjunxi6/" title="谭俊熙_mini桌面应用后端" itemprop="url">谭俊熙_mini桌面应用后端</a>
  </h1>
  <p class="article-author">By
       
		<a href="/about" title="b3434lockchain" target="_blank" itemprop="author">b3434lockchain</a>
		
  <p class="article-time">
    <time datetime="2019-04-15T08:00:00.000Z" itemprop="datePublished"> Published 2019-04-15</time>
    
  </p>
</header>
	<div class="article-content">
		
		<div id="toc" class="toc-article">
			<strong class="toc-title">Contents</strong>
		
			<ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#数据库设计"><span class="toc-number">1.</span> <span class="toc-text">数据库设计</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#后端整体框架（springboot-netty-mybatis）"><span class="toc-number">2.</span> <span class="toc-text">后端整体框架（springboot+netty+mybatis）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#总结"><span class="toc-number">3.</span> <span class="toc-text">总结</span></a></li></ol>
		
		</div>
		
		<h4 id="数据库设计"><a href="#数据库设计" class="headerlink" title="数据库设计"></a>数据库设计</h4><p><img src="https://upload-images.jianshu.io/upload_images/14229679-8a942ba59e90da94.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="数据库结构"></p>
<ol>
<li>将登录认证的信息和个人信息分开不同的表存储，方便以后扩展第三方登录等等各种登陆方式。</li>
<li>将认证信息和个人信息分开，可是使得信息更加安全，返回前端的信息不会包含密码之类的信息。</li>
<li>其中id是通过一个叫idworker的生成器成成的唯一标识的16位字符串的id，方便以后的分库分表操作</li>
<li>密码通过md5加密保存</li>
</ol>
<h4 id="后端整体框架（springboot-netty-mybatis）"><a href="#后端整体框架（springboot-netty-mybatis）" class="headerlink" title="后端整体框架（springboot+netty+mybatis）"></a>后端整体框架（springboot+netty+mybatis）</h4><p><img src="https://upload-images.jianshu.io/upload_images/14229679-6a42b6317073e9d7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="目录结构"></p>
<ol>
<li><p>通过mybatis的逆向生成工具，生成相应的mapper，pojo，xml</p>
</li>
<li><p>整合springboot和mybatis（导入依赖，配置application.properties）</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"> &lt;dependency&gt;</span><br><span class="line">&lt;groupId&gt;mysql&lt;/groupId&gt;</span><br><span class="line">&lt;artifactId&gt;mysql-connector-java&lt;/artifactId&gt;</span><br><span class="line">&lt;version&gt;8.0.15&lt;/version&gt;</span><br><span class="line"> &lt;/dependency&gt;</span><br><span class="line"></span><br><span class="line"> &lt;dependency&gt;</span><br><span class="line">&lt;groupId&gt;org.mybatis.spring.boot&lt;/groupId&gt;</span><br><span class="line">&lt;artifactId&gt;mybatis-spring-boot-starter&lt;/artifactId&gt;</span><br><span class="line">&lt;version&gt;1.3.2&lt;/version&gt;</span><br><span class="line"> &lt;/dependency&gt;</span><br><span class="line"></span><br><span class="line"> &lt;dependency&gt;</span><br><span class="line">&lt;groupId&gt;tk.mybatis&lt;/groupId&gt;</span><br><span class="line">&lt;artifactId&gt;mapper-spring-boot-starter&lt;/artifactId&gt;</span><br><span class="line">&lt;version&gt;1.2.4&lt;/version&gt;</span><br><span class="line"> &lt;/dependency&gt;</span><br></pre></td></tr></table></figure>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">#########################################</span><br><span class="line"># Mybatis配置</span><br><span class="line"></span><br><span class="line">mybatis.type-aliases-package = com.example.pojo</span><br><span class="line">mybatis.mapper-locations = classpath:mapper/*.xml</span><br><span class="line"></span><br><span class="line">mapper.mappers = com.example.utils.MyMapper</span><br><span class="line">mapper.not-empty = false</span><br><span class="line">mapper.identity = MYSQL</span><br><span class="line"></span><br><span class="line">##########################################</span><br><span class="line"># 配置数据源相关 使用HikariCP 数据源</span><br><span class="line"></span><br><span class="line">spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver</span><br><span class="line">spring.datasource.url=jdbc:mysql://localhost:3306/demo1?useUnicode=true&amp;characterEncoding=UTF-8&amp;autoReconnect=true&amp;failOverReadOnly=false&amp;maxReconnects=15000&amp;allowMultiQueries=true&amp;useSSL=false&amp;serverTimezone=Asia/Shanghai</span><br><span class="line">spring.datasource.username=root</span><br><span class="line">spring.datasource.password=root</span><br><span class="line">spring.datasource.type=com.zaxxer.hikari.HikariDataSource</span><br><span class="line">spring.datasource.hikari.minimum-idle=5</span><br><span class="line">spring.datasource.hikari.maximum-pool-size=15</span><br><span class="line">spring.datasource.hikari.auto-commit=true</span><br><span class="line">spring.datasource.hikari.idle-timeout=600000</span><br><span class="line">spring.datasource.hikari.pool-name=DatebookHikariCP</span><br><span class="line">spring.datasource.hikari.max-lifetime=1800000</span><br><span class="line">spring.datasource.hikari.connection-timeout=30000</span><br><span class="line">spring.datasource.hikari.connection-test-query=SELECT 1</span><br></pre></td></tr></table></figure>
<p> ps: 注意driver-name：driver-class-name = com.mysql.cj.jdbc.Driver<br> ps: 注意时区问题：serverTimezone=Asia/Shanghai</p>
</li>
<li><p>整合springboot和netty（导入依赖，配置启动）<br> 使用单例模式，获取WCServer</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">public static WCServer getInstance()&#123;</span><br><span class="line">    if (wcServer == null) &#123;</span><br><span class="line">        synchronized (WCServer.class) &#123;</span><br><span class="line">            if (wcServer == null) &#123;</span><br><span class="line"></span><br><span class="line">                wcServer = new WCServer();</span><br><span class="line"></span><br><span class="line">                bossGroup = new NioEventLoopGroup();</span><br><span class="line">                workerGroup = new NioEventLoopGroup();</span><br><span class="line"></span><br><span class="line">                serverBootstrap = new ServerBootstrap();</span><br><span class="line">                serverBootstrap.group(bossGroup,workerGroup)</span><br><span class="line">                        .channel(NioServerSocketChannel.class)</span><br><span class="line">                        .childHandler(new ChannelInitializer&lt;SocketChannel&gt;() &#123;</span><br><span class="line"></span><br><span class="line">                            @Override</span><br><span class="line">                            protected void initChannel(SocketChannel socketChannel) throws Exception &#123;</span><br><span class="line">                                ChannelPipeline pipeline = socketChannel.pipeline();</span><br><span class="line">                                // http解编码器</span><br><span class="line">                                pipeline.addLast(new HttpServerCodec());</span><br><span class="line">                                // 对httpMessage进行聚合，变成FullHttpRequest和FullHttpResponse</span><br><span class="line">                                pipeline.addLast(new HttpObjectAggregator(1024*64));</span><br><span class="line">                                //</span><br><span class="line">                                pipeline.addLast(new WebSocketServerProtocolHandler(&quot;/wc&quot;));</span><br><span class="line">                            &#125;</span><br><span class="line">                        &#125;);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return wcServer;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p> 并向容器注册一个nettyBooter，当容器初始化完成后，启动WCServer</p>
</li>
<li><p>开始编写业务逻辑<br> 总体想法：编写一个userController提供登录和注册两个接口，前端传过来Localauth类的json，后端调用UserServiceImpl通过userid关联到相应的user，并把user类包装成一个JsonResult类返回给前端。</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">public class JSONResult &#123;</span><br><span class="line">        // 响应业务状态</span><br><span class="line">        private Integer status;</span><br><span class="line"></span><br><span class="line">        // 响应消息</span><br><span class="line">        private String msg;</span><br><span class="line"></span><br><span class="line">        // 响应中的数据</span><br><span class="line">        private Object data;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">@RestController</span><br><span class="line">@RequestMapping(&quot;u&quot;)</span><br><span class="line">public class UserController &#123;</span><br><span class="line"></span><br><span class="line">        @Autowired</span><br><span class="line">        private UserService userService;</span><br><span class="line"></span><br><span class="line">        @PostMapping(&quot;/Login&quot;)</span><br><span class="line">        public JSONResult Login(@RequestBody Localauth loginmsg) throws Exception &#123;</span><br><span class="line"></span><br><span class="line">                // 判断用户名密码是否为空</span><br><span class="line">                if (StringUtils.isBlank(loginmsg.getUsername()) || StringUtils.isBlank(loginmsg.getPassword())) &#123;</span><br><span class="line">                      return JSONResult.errorMsg(&quot;用户名密码不能为空！！&quot;);</span><br><span class="line">                &#125;</span><br><span class="line"></span><br><span class="line">                // 判断用户名是否存在</span><br><span class="line">                boolean usernameIsExist = userService.usernameIsExist(loginmsg.getUsername());</span><br><span class="line">                Users userResult = null;</span><br><span class="line"></span><br><span class="line">                if (usernameIsExist) &#123;</span><br><span class="line">                      //如果存在，则判断密码是否正确</span><br><span class="line">                      userResult = userService.queryForLogin(loginmsg.getUsername(),</span><br><span class="line">                                          MD5Utils.getMD5Str(loginmsg.getPassword()));</span><br><span class="line"></span><br><span class="line">                      if (userResult == null) &#123;</span><br><span class="line">                            return JSONResult.errorMsg(&quot;用户名密码不正确！&quot;);</span><br><span class="line">                      &#125;</span><br><span class="line"></span><br><span class="line">                            return JSONResult.ok(userResult);</span><br><span class="line">                &#125; else &#123;</span><br><span class="line">                      //如果不存在</span><br><span class="line">                      return JSONResult.errorMsg(&quot;用户名不存在！&quot;);</span><br><span class="line">                &#125;</span><br><span class="line">      &#125;</span><br><span class="line"></span><br><span class="line">      @PostMapping(&quot;/regist&quot;)</span><br><span class="line">      public JSONResult regist(@RequestBody Localauth loginmsg) throws Exception &#123;</span><br><span class="line">              Users userResult = userService.registAndSave(loginmsg);</span><br><span class="line">              return JSONResult.ok(userResult);</span><br><span class="line">      &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p> ps: @RequestBody 会将Json格式转化为相应的类</p>
</li>
</ol>
<h4 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h4><p>此次实操，把最近学过的框架的知识再自己动手过了一遍，项目上完成了雏形，基本上把登录注册完成了。</p>
  
	</div>
		<footer class="article-footer clearfix">
<div class="article-catetags">


  <div class="article-tags">
  
  <span></span> <a href="/tags/周报/">周报</a><a href="/tags/谭俊熙/">谭俊熙</a>
  </div>

</div>



	<div class="article-share" id="share">
	
	  <div data-url="http://b3434lockchain.gitee.io/2019/04/15/tanjunxi/tanjunxi6/" data-title="谭俊熙_mini桌面应用后端 | B3434lockchain" data-tsina="" class="share clearfix">
	  </div>
	
	</div>


</footer>

   	       
	</article>
	
<nav class="article-nav clearfix">
 
 <div class="prev" >
 <a href="/2019/04/21/jiaxin/jiaxin2/" title="学习配置部署Maven项目">
  <strong>上一篇：</strong><br/>
  <span>
  学习配置部署Maven项目</span>
</a>
</div>


<div class="next">
<a href="/2019/04/15/jiaxin/jiaxin1/"  title="苏佳鑫第七周周报">
 <strong>下一篇：</strong><br/> 
 <span>苏佳鑫第七周周报
</span>
</a>
</div>

</nav>

	



</div>  
      <div class="openaside"><a class="navbutton" href="#" title="Show Sidebar"></a></div>

  <div id="toc" class="toc-aside">
  <strong class="toc-title">Contents</strong>
 
 <ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#数据库设计"><span class="toc-number">1.</span> <span class="toc-text">数据库设计</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#后端整体框架（springboot-netty-mybatis）"><span class="toc-number">2.</span> <span class="toc-text">后端整体框架（springboot+netty+mybatis）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#总结"><span class="toc-number">3.</span> <span class="toc-text">总结</span></a></li></ol>
 
  </div>

<div id="asidepart">
<div class="closeaside"><a class="closebutton" href="#" title="Hide Sidebar"></a></div>
<aside class="clearfix">

  

  
<div class="tagslist">
	<p class="asidetitle">Tags</p>
		<ul class="clearfix">
		
			
				<li><a href="/tags/周报/" title="周报">周报<sup>23</sup></a></li>
			
		
			
				<li><a href="/tags/谭俊熙/" title="谭俊熙">谭俊熙<sup>11</sup></a></li>
			
		
			
				<li><a href="/tags/苏思捷/" title="苏思捷">苏思捷<sup>5</sup></a></li>
			
		
			
				<li><a href="/tags/学习报告/" title="学习报告">学习报告<sup>5</sup></a></li>
			
		
			
				<li><a href="/tags/卢家豪/" title="卢家豪">卢家豪<sup>5</sup></a></li>
			
		
			
				<li><a href="/tags/报告/" title="报告">报告<sup>5</sup></a></li>
			
		
			
				<li><a href="/tags/苏佳鑫/" title="苏佳鑫">苏佳鑫<sup>4</sup></a></li>
			
		
			
				<li><a href="/tags/冯华文/" title="冯华文">冯华文<sup>4</sup></a></li>
			
		
			
				<li><a href="/tags/周报反馈/" title="周报反馈">周报反馈<sup>2</sup></a></li>
			
		
			
				<li><a href="/tags/吴朝捷/" title="吴朝捷">吴朝捷<sup>2</sup></a></li>
			
		
			
				<li><a href="/tags/黎宁/" title="黎宁">黎宁<sup>1</sup></a></li>
			
		
			
				<li><a href="/tags/笔记/" title="笔记">笔记<sup>1</sup></a></li>
			
		
		</ul>
</div>


</aside>
</div>
    </div>
    <footer><div id="footer" >
	
	
	<div class="social-font" class="clearfix">
		
		
		
		
		
		
		
		
		
		
	</div>
			
		

		<p class="copyright">
		
		</p>
</div>
</footer>
    <script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/jquery.imagesloaded.min.js"></script>
<script src="/js/gallery.js"></script>
<script src="/js/jquery.qrcode-0.12.0.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){ 
  $('.navbar').click(function(){
    $('header nav').toggleClass('shownav');
  });
  var myWidth = 0;
  function getSize(){
    if( typeof( window.innerWidth ) == 'number' ) {
      myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth) {
      myWidth = document.documentElement.clientWidth;
    };
  };
  var m = $('#main'),
      a = $('#asidepart'),
      c = $('.closeaside'),
      o = $('.openaside');
  c.click(function(){
    a.addClass('fadeOut').css('display', 'none');
    o.css('display', 'block').addClass('fadeIn');
    m.addClass('moveMain');
  });
  o.click(function(){
    o.css('display', 'none').removeClass('beforeFadeIn');
    a.css('display', 'block').removeClass('fadeOut').addClass('fadeIn');      
    m.removeClass('moveMain');
  });
  $(window).scroll(function(){
    o.css("top",Math.max(80,260-$(this).scrollTop()));
  });
  
  $(window).resize(function(){
    getSize(); 
    if (myWidth >= 1024) {
      $('header nav').removeClass('shownav');
    }else{
      m.removeClass('moveMain');
      a.css('display', 'block').removeClass('fadeOut');
      o.css('display', 'none');
      
      $('#toc.toc-aside').css('display', 'none');
        
    }
  });
});
</script>

<script type="text/javascript">
$(document).ready(function(){ 
  var ai = $('.article-content>iframe'),
      ae = $('.article-content>embed'),
      t  = $('#toc'),
      ta = $('#toc.toc-aside'),
      o  = $('.openaside'),
      c  = $('.closeaside');
  if(ai.length>0){
    ai.wrap('<div class="video-container" />');
  };
  if(ae.length>0){
   ae.wrap('<div class="video-container" />');
  };
  c.click(function(){
    ta.css('display', 'block').addClass('fadeIn');
  });
  o.click(function(){
    ta.css('display', 'none');
  });
  $(window).scroll(function(){
    ta.css("top",Math.max(140,320-$(this).scrollTop()));
  });
});
</script>


<script type="text/javascript">
$(document).ready(function(){ 
  var $this = $('.share'),
      url = $this.attr('data-url'),
      encodedUrl = encodeURIComponent(url),
      title = $this.attr('data-title'),
      tsina = $this.attr('data-tsina'),
      description = $this.attr('description');
  var html = [
  '<div class="hoverqrcode clearfix"></div>',
  '<a class="overlay" id="qrcode"></a>',
  '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
  '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
  '<a href="#qrcode" class="article-share-qrcode" title="微信"></a>',
  '<a href="http://widget.renren.com/dialog/share?resourceUrl=' + encodedUrl + '&srcUrl=' + encodedUrl + '&title=' + title +'" class="article-share-renren" target="_blank" title="人人"></a>',
  '<a href="http://service.weibo.com/share/share.php?title='+title+'&url='+encodedUrl +'&ralateUid='+ tsina +'&searchPic=true&style=number' +'" class="article-share-weibo" target="_blank" title="微博"></a>',
  '<span title="Share to"></span>'
  ].join('');
  $this.append(html);

  $('.hoverqrcode').hide();

  var myWidth = 0;
  function updatehoverqrcode(){
    if( typeof( window.innerWidth ) == 'number' ) {
      myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth) {
      myWidth = document.documentElement.clientWidth;
    };
    var qrsize = myWidth > 1024 ? 200:100;
    var options = {render: 'image', size: qrsize, fill: '#2ca6cb', text: url, radius: 0.5, quiet: 1};
    var p = $('.article-share-qrcode').position();
    $('.hoverqrcode').empty().css('width', qrsize).css('height', qrsize)
                          .css('left', p.left-qrsize/2+20).css('top', p.top-qrsize-10)
                          .qrcode(options);
  };
  $(window).resize(function(){
    $('.hoverqrcode').hide();
  });
  $('.article-share-qrcode').click(function(){
    updatehoverqrcode();
    $('.hoverqrcode').toggle();
  });
  $('.article-share-qrcode').hover(function(){}, function(){
      $('.hoverqrcode').hide();
  });
});   
</script>











<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" media="screen" type="text/css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
  $('.article-content').each(function(i){
    $(this).find('img').each(function(){
      if ($(this).parent().hasClass('fancybox')) return;
      var alt = this.alt;
      if (alt) $(this).after('<span class="caption">' + alt + '</span>');
      $(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox"></a>');
    });
    $(this).find('.fancybox').each(function(){
      $(this).attr('rel', 'article' + i);
    });
  });
  if($.fancybox){
    $('.fancybox').fancybox();
  }
}); 
</script>



<!-- Analytics Begin -->





<!-- Analytics End -->

<!-- Totop Begin -->

	<div id="totop">
	<a title="Back to Top"><img src="/img/scrollup.png"/></a>
	</div>
	<script src="/js/totop.js"></script>

<!-- Totop End -->

<!-- MathJax Begin -->
<!-- mathjax config similar to math.stackexchange -->


<!-- MathJax End -->

<!-- Tiny_search Begin -->

<!-- Tiny_search End -->

  </body>
</html>
